<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .static{
            width:150px;
            height:150px;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: firebrick;
        }
        .b{
            border:20px solid blueviolet;
            
        }
        .c{
            border-radius: 50%;
        }
        .mains{

        }
        .navs{
            width:440px;
            display: flex;
            justify-content: space-between;
        }
        .nav{
            width:100px;
            height:38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color:#fff;
            cursor: pointer;
        }
        .nav.active{
            background: deeppink;
            color:aquamarine;
        }
        .content{

        }
        .citem{
            width:440px;
            height:440px;
            border-radius: 20px;
            color:#f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top:20px;
        }
        table td{
            border:1px solid #000;
            padding:3px;
        }
        .img{
            width:200px;
            height:200px;
            border-radius: 50%;
            
        }

        .v-enter{
            opacity: 0;
        }
        .v-enter-to{
            opacity: 1;
        }

        .v-leave{
            opacity: 1;
        }
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active{
            transition: all 2s;
        }
        .v-leave-active{
            transition: all 2s;
        }

        @keyframes b-enter{
            from{
                opacity: 0;
                transform: scale(0);
            }
            to{
                opacity: 1;
                transform: scale(1);
            }
        }
        @keyframes slide-leave{
            0%{
                opacity: 1;
                transform: scale(1);
            }
            100%{
                opacity: 0;
                transform: scale(0);
            }
        }
        .a-enter-active{
            animation: b-enter 1.2s linear both;
        }
        .a-leave-active{
            animation: slide-leave 1.2s linear both;
        }

        .zoom-enter-active{
            animation: zoomInDown 1s ;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s ;
        }

        .light-enter-active{
            animation: rotateInDownLeft 1s;
        }
        .light-leave-active{
            animation: rotateOutDownLeft 1s;
        }

        .fade-enter-active{
            animation: fadeInRight 1s;
        }
        .fade-leave-active{
            animation: fadeOutRight 1s;
        }   
        .appear{
            animation:  tada 1.5s ;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- <div>
            <transition >
                <img v-show="show" class="img" src="http://47.104.209.44/base/imgs/1.jpg" alt="">
            </transition>
            <button @click="show=!show">点击切换</button>
        </div>
        <div>
            <transition name="a">
                <img v-show="show1" class="img" src="http://47.104.209.44/base/imgs/1.jpg" alt="">
            </transition>
            <button @click="show1=!show1">点击切换</button>
        </div>
        <div>
            <transition name="zoom">
                <img v-show="show2" class="img" src="http://47.104.209.44/base/imgs/1.jpg" alt="">
            </transition>
            <button @click="show2=!show2">点击切换</button>
        </div> -->

        <!-- <div>
            <transition name="light">
                <img v-show="show3" class="img" src="http://47.104.209.44/base/imgs/11.jpg" alt="">
            </transition>
          
            <button @click="show3=!show3">点击切换4</button>
        </div> -->
        <div>
            <transition name="fade" 
                appear
                appear-active-class="appear"
            >
                <img v-show="show4" class="img " src="http://47.104.209.44/base/imgs/22.jpg" alt="">
            </transition>
            <button @click="show4=!show4">点击切换5</button>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data:{
                title:"Vue transition 过渡",
                show:true,
                show1:true,
                show2:true,
                show3:true,
                show4:true 

            },
            
            methods:{
               
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


       
    </script>
    <!-- 

        route  页面切换    进入和离开的动画  
        Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
        v-if
        v-show
        组件切换  (动态组件切换  子组件切换)


        过渡  (0-1)  
        在进入/离开的过渡中，会有 6 个 class 切换
        v-enter  进入之前    开始帧 过渡
        v-enter-active 正在进入   animation
        v-enter-to  进入完成   结束帧

        v-leave  离开之前
        v-leave-active  正在离开
        v-leave-to   离开完成

        v-   transition 没有name 默认 v-
        transition 添加 name = fade  v 替换成 fade 

        初始化渲染 过渡 
        appear
        appear-active-class  动画 

        v-if / v-show 
     -->
</body>
</html>